<template>
  <VTable ref="tableRefDetail" v-bind="tableOptins">
    <template #form="{ form }">
      <div class="w-[380px] mr-[20px]">
        <RangeTime v-model="form.time" />
      </div>
      <VGroup>
        <VSelects
          v-model="form.channelId"
          :dataSourse="optionsData?.channelList || []"
          placeholder="渠道/银行"
          labelField="channelName"
          valueField="id"
          @change="handleAccountChanne"
          class="w-[150px]"
        />
        <VSelects
          v-model="form.accountType"
          :dataSourse="optionsData.account_type"
          placeholder="类型"
          @change="handleAccountType"
        />
        <VSelects
          v-model="form.accountId"
          :dataSourse="accountOption"
          placeholder="账号/卡号"
        />
      </VGroup>
      <VSelects
        v-model="form.type"
        :dataSourse="optionsData.capital_flow_type"
        placeholder="流水类型"
        class="w-[150px]"
      />
      <VSelects
        v-model="form.currency"
        :dataSourse="optionsData.currency"
        placeholder="币种"
        valueField="label"
        class="w-[150px]"
      />
    </template>
    <template #toolbar_btns>
      <VActionBar :actions="actions" />
    </template>
  </VTable>
  <CapitalSource
    v-model="sourceVisible"
    :id="sourceId"
    @refresh="refresh"
    @close="sourceId = null"
  />
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { getTableSelectRow } from "@/hooks/tools.js";
import { config_name } from "@/config/export.js";
import RangeTime from "@/components/rangeTime/index.vue";
import {
  getCapitalFlowDetailList,
} from "../../api.js";

import capitalSource from "../capitalSource/index.vue";
import { getAccountOption } from "@/api/index.js";
const props = defineProps({
  optionsData: { type: Object, default: () => ({}) },
});
const tableRefDetail = ref();

const { optionsData } = toRefs(props);
const tableOptins = reactive({
  formConfig: {
    data: {
      channelId: "",
      accountType: "",
      accountId: "",
      type: "",
      currency: "",
      time: [],
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    {
      type: "checkbox",
      width: 50,
      fixed: "left",
    },
    {
      title: "ID",
      field: "id",
      fixed: "left",
      width: 180,
      slots: {
        default: ({ row }) => {
          return <span>{row?.id?.toString() || "-"}</span>;
        },
      },
    },
    {
      title: "流水类型",
      fixed: "left",
      field: "accountType",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <span>{row?.type?.label || "-"}</span>;
        },
      },
    },
    {
      title: "渠道类型",
      fixed: "left",
      field: "accountType",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <span>{row?.accountType?.label || "-"}</span>;
        },
      },
    },
    {
      title: "渠道/银行",
      field: "channel	",
      minWidth: 100,
    },
    {
      title: "账号/卡号",
      field: "account",
      minWidth: 100,
    },
    {
      title: "业务部门",
      field: "department",
      minWidth: 100,
    },
    {
      title: "资金说明",
      field: "illustrate",
      minWidth: 200,
      line: 2,
      slots: {
        default: ({ row }) => {
          return (
            <div onClick={() => handleIllustrate(row.id)}>
              {row?.illustrate || "-"}
            </div>
          );
        },
      },
    },
    {
      title: "备注",
      field: "todo",
      minWidth: 200,
      line: 2,
    },
    {
      title: "单据",
      field: "documentNo",
      minWidth: 100,
    },
    {
      title: "币种",
      field: "currency",
      minWidth: 100,
    },
    {
      title: "收入金额",
      field: "income",
      minWidth: 100,
    },
    {
      title: "支出金额",
      field: "expenditure",
      minWidth: 100,
    },
    {
      title: "汇率",
      field: "exchangeRate",
      minWidth: 100,
    },
    {
      title: "人民币金额/RMB",
      field: "localCurrencyAmount",
      minWidth: 100,
    },
    {
      title: "余额",
      field: "balance",
      minWidth: 100,
    },
    {
      title: "添加时间",
      field: "createdAt",
      width: 170,
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => {
        const { time } = form;
        form = {
          ...form,
          createAtStart: time?.[0] || undefined,
          createAtEnd: time?.[1] || undefined,
          time: undefined,
        };

        return getCapitalFlowDetailList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const sourceVisible = ref(false);
const sourceId = ref(null);
const handleIllustrate = (id) => {
  sourceId.value = id.toString();
  sourceVisible.value = true;
};

const refresh = () => {
  tableRefDetail?.value.$table.commitProxy("query");
};
const accountOption = ref([]);
const handleAccountChanne = (val) => {
  let accountType = tableRefDetail.value.getForm().accountType;
  if (!(val && accountType)) {
    tableRefDetail?.value?.setFormField("accountId", "");
    accountOption.value = [];
    return;
  }
  getAccountOptionList({
    channelId: val,
    accountType: accountType,
  });
};
const handleAccountType = (val) => {
  let channelId = tableRefDetail.value.getForm().channelId;
  if (!(val && channelId)) {
    tableRefDetail?.value?.setFormField("accountId", "");
    accountOption.value = [];
    return;
  }
  getAccountOptionList({
    channelId: channelId,
    accountType: val,
  });
};
const getAccountOptionList = async (params) => {
  const { data } = await getAccountOption(params);
  data?.forEach((item) => {
    item.value = item.value.toString();
  });
  accountOption.value = data || [];
};
//导出中心
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRefDetail.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["capital"]["capital_flow_detail"],
    condition,
  });
};
const actions = [
  {
    label: "导出",
    right: true,
    dkicon: "icon-Upload",
    fn: handleExport,
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 170px) !important;
}
</style>
